<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-demo-实现图片切换效果</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <img v-bind:src="imgs[index]" style="height: 100px; width: 100px" />
    <a v-show="index > 0" v-on:click="prevImg" href="#">上一张</a>
    <a v-show="index < imgs.length -1" v-on:click="nextImg" href="#">下一张</a>
</div>
</body>
<script>

    let app = new Vue({
        el: '#app',
        data: {
            index: 0,
            imgs: [
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404549&di=8519ca28ff822fd453f7492c0bcc820c&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20160506%2Fef10a11e89c345b48a3bd0fcfcdbbc2a_th.png',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404548&di=338f629b5ae6331d05a477736de6e239&imgtype=0&src=http%3A%2F%2F6352123.s21i-6.faiusr.com%2F4%2FABUIABAEGAAgnfDzrAUoj5DfjQMwgAQ4gAQ.png',
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580545404548&di=d4464685a09983fdab108c385c373531&imgtype=0&src=http%3A%2F%2Fgss0.baidu.com%2F9vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F0bd162d9f2d3572c2850429d8913632763d0c3c5.jpg'
            ]
        },
        methods: {
            prevImg: function () {
                this.index--;
            },
            nextImg: function () {
                this.index++;
            }
        }
    });

</script>
</html>